<script setup>
import {useRoute} from "vue-router";
import {onMounted, ref, watch} from "vue";
import axios from "axios";
import TopMain from "@/1-topBar/topMain.vue";
import {DocumentChecked} from "@element-plus/icons-vue";
import Details1 from "@/1-home/details1.vue";
import details2 from "@/1-home/details2.vue";
import map from "@/1-orders/map.vue"
import pass from "@/1-orders/pass.vue"
import Lookzuo from "@/1-orders/lookzuo.vue";

const route = useRoute();
console.log("id:" + route.query.id)
const id = route.query.id;
const detailList = ref([]);
const detailList1 = ref('');
const introduce1 = ref({});
const introduce3 = ref('');
const introduce4 = ref('');
const introduce5 = ref('');
const introduce6 = ref('');
const introduce7 = ref('');
// let introduce1List = ref([]);
// let introduce1List1 = ref([])
// let introduce1 =ref(null)
const imgUrl = "http://localhost:8080/";
onMounted(() => {
  scrollToSelectThree();
  // axios.get("http://localhost:8080/introduce/lookforIntroduceByid/" + id).then((res) => {
  //   introduce1List.value = res.data;
  //   introduce1.value = res.data.introduce1
  //   JSON.stringify(introduce1.value)
  //   // introduce1List1.value=introduce1List.introduce1List[0];
  //   console.log(res.data)
  //   console.log(introduce1List.value)
  // })
  axios.get("http://localhost:8080/introduce/lookforIntroduceByid1/" + id).then((res) => {
    introduce1.value = res.data;
  })
  axios.get("http://localhost:8080/introduce/lookforIntroduceByid2/" + id).then((res) => {
    detailList1.value = res.data;
  })
  axios.post("http://localhost:8080/detail/findAllDetail2").then((res) => {
    detailList.value = res.data;
  })
  if (threeTop.value === '项目详情') {
    disableClick.value[1] = true
  }
})
watch(() => introduce1.value, () => {
  introduce3.value = introduce1.value.photo;
  introduce4.value = introduce1.value.name;
  introduce5.value = introduce1.value.time;
  introduce6.value = introduce1.value.city;
  introduce7.value = introduce1.value.address;
  console.log(introduce3.value)
})
const threeTop = ['项目详情', '购票须知', '观演须知']
const disableClick = ref(new Array(threeTop.length).fill(false))
function selectthree(index) {
  disableClick.value.fill(false);
  disableClick.value[index] = true;
}
//
const selectThree = ref(null);
const scrollToSelectThree = () => {
  if (selectThree.value) {
    selectThree.value.scrollIntoView({
      behavior: 'smooth',
    });
  }
};
const selectThree1 = ref(null);
const scrollToSelectThree1 = () => {
  if (selectThree1.value) {
    selectThree1.value.scrollIntoView({
      behavior: 'smooth',
    });
  }
};
const selectThree2 = ref(null);
const scrollToSelectThree2 = () => {
  if (selectThree2.value) {
    selectThree2.value.scrollIntoView({
      behavior: 'smooth',
    });
  }
};
</script>
<script>

</script>
<template>
  <top-main></top-main>
<!--  {{introduce1}}-->
  <el-row style="margin-top: 60px">
    <el-col :span="4"></el-col>
    <el-col :span="16">
      <el-container>
        <el-aside class="body" width="75%">
          <el-container style="">
            <el-aside class="left2">
              <img class="img" :src="imgUrl+introduce3" alt="">
            </el-aside>
            <el-main class="right2">
              <div class="r1">
                <div class="r2">
                  <div class="r3">
                    总票代
                  </div>
                  {{ introduce4 }}
                </div>
                <div class="r4">
                  时间：{{ introduce5 }}
                </div>
                <div class="r4">
                  场馆：{{introduce6}}&nbsp|&nbsp{{introduce7}}
<!--                  <lookzuo></lookzuo>-->
                </div>
                <div class="r5">
                  <div class="r6">
                    <div class="r7">
                      预售
                    </div>
                    <div class="r8">
                      预售期间，由于主办未正式开票，下单后无法立即为您配票
                    </div>
                    <div class="r9">
                      一般于演出前1-2周开票，待正式开票后，请您通过订单详情页或者票夹详情，查看票品信息、取票方式等演出相关信息
                    </div>
                    <div class="t2">
                      <el-button class="button2"><pass></pass></el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-main>
          </el-container>
          <div class="top-three" :class="{ fixed: isFixed }">
            <div class="top-three-in" @click="scrollToSelectThree2"   ><a>项目详情</a>
            </div>
            <div class="top-three-in" @click="scrollToSelectThree" ><a>购票须知</a>
            </div>
            <div class="top-three-in"  @click="scrollToSelectThree1" ><a>观演须知</a>
            </div>
          </div>
          <div class="d1">
            <p ref="selectThree2" class="p1">项目详情</p>
            <el-divider></el-divider>
            <img class="img2" :src="imgUrl+detailList1.photo">
          </div>
          <div >
            <p ref="selectThree" class="p1">购票须知</p>
             <el-divider></el-divider>
            <p class="p2">限购规则</p>
            <p class="p3">每笔订单最多购买4张、每个账号最多购买4张。</p>
            <p class="p2">退票/换票规则</p>
            <p class="p3">本项目支持有条件退款，具体可申请退票的期间、退票手续费等退票条件以项目主办方提供的退票政策为准，详见服务说明或项目详情页公示的退票政策。</p>
            <p class="p2">入场规则</p>
            <p class="p3">须携带购票时对应证件验证入场。</p>
            <p class="p2">儿童购票</p>
            <p class="p3">儿童一律凭票入场</p>
            <p class="p2">发票说明</p>
            <p class="p3">演出开始前，去【订单详情页】提交发票申请。我们会将电子发票发送至您的邮箱。</p>
            <p class="p2">实名购票规则</p>
            <p class="p3">一张门票对应一个证件；证件支持：身份证/护照/港澳台居民居住证/台湾居民来往大陆通行证/港澳居民来往内地通行证/外国人永久居留身份证</p>
            <p class="p2">异常排单说明</p>
            <p class="p3">对于异常订购行为，大麦网有权在订单成立或者生效之后取消相应订单。异常订购行为包括但不限于以下情形： （1）通过同一ID订购超出限购张数的订单。 （2）经合理判断认为非真实消费者的下单行为，包括但不限于通过批量相同或虚构的支付账号、收货地址（包括下单时填写及最终实际收货地址）、收件人、电话号码订购超出限购张数的订单。</p>
            <p class="p2">温馨提示</p>
            <p class="p3">1.购买前请您提前规划好行程，做好相应准备，以免影响您的正常观演，感谢您的理解和配合。2.若演出受不可抗力影响延期或取消，大麦将对演出票订单按照项目官方通知方案进行处理，其他因观演发生的费用需由您自行承担。</p>
          </div>
          <div >
            <p  ref="selectThree1" class="p1">观演须知</p>
            <el-divider></el-divider>
            <p class="p2">演出时长</p>
            <p class="p3">约120分钟（以现场为准）</p>
            <p class="p2">入场时间</p>
            <p class="p3">请于演出前约120分钟入场</p>
            <p class="p2">最低演出曲目</p>
            <p class="p3">20</p>
            <p class="p2">最低演出时长</p>
            <p class="p3">120分钟</p>
            <p class="p2">禁止携带物品</p>
            <p class="p3">由于安保和版权的原因，大多数演出、展览及比赛场所禁止携带食品、饮料、专业摄录设备、打火机等物品，请您注意现场工作人员和广播的提示，予以配合</p>
            <p class="p2">寄存说明</p>
            <p class="p3">无寄存处,请自行保管携带物品，谨防贵重物品丢失。</p>

          </div>
        </el-aside>
        <el-main class="body" width="25%">
          <div class="left1">
            <div class="t1">
              <div class="t2">
<!--                <el-button class="button1"><pass></pass></el-button>-->
              </div>
              <div class="t3">
                <el-icon style="width: 14px;">
                  <DocumentChecked/>
                </el-icon>
                条件退
              </div>
              <div class="t4">
                本项目支持有条件退款，若需要收取退票手续费，将以用户实际支付票款为基准收取。由于项目主办方提供的退票政策不同，具体可支持用户申请退款的情形以项目详情页公告为准，退票政策最迟于实际开售时公布。
              </div>
              <div class="t3">
                <el-icon style="width: 14px;">
                  <DocumentChecked/>
                </el-icon>
                实名制购票和入场
              </div>
              <div class="t4">
                本项目需实名制购票及入场，购票完成后观演人信息不可更改，须购票时填写的实名观演人携带本人有效证件验证入场。
              </div>
              <div class="t3">
                <el-icon style="width: 14px;">
                  <DocumentChecked/>
                </el-icon>
                不支持选座
              </div>
              <div class="t4">
                本项目不支持自主选座，同一个订单优先连座
              </div>
              <div class="t3">
                <el-icon style="width: 14px;">
                  <DocumentChecked/>
                </el-icon>
                电子票
              </div>
              <div class="t4">
                通过身份证验票入场
              </div>
              <div class="t3">
                <el-icon style="width: 14px;">
                  <DocumentChecked/>
                </el-icon>
                电子发票
              </div>
              <div class="t4">
                发票开具方：北京大麦文化传媒发展有限公司本项目支持开具电子发票。需要在演出开始前在订单详情页提交发票申请，一般演出结束后1个月左右开具并发送至您的邮箱。
              </div>
            </div>
            <div class="t5">
              为你推荐
            </div>
            <div class="t6" v-for="(item,index) in detailList" :key="index">

              <div style="display: flex"  @click="$router.push('/introduce?id='+item.id)">
                <details2 :t1=item.name :t2=item.address :t3=item.time :t4=item.price :t5=item.photo :t6=item.id></details2>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-col>
    <el-col :span="4"></el-col>
  </el-row>

</template>

<style scoped lang="scss">
.body {
  border: 1px solid #EBEBEB;
  //border: 1px solid black;

}

.left1 {
  width: 100%;

  margin: auto;
  //background: #FAFAFA;
  //background: #222222;
}

.t1 {
  width: 85%;
  //height: 640px;
  margin: auto;
  //background: green;
}

.t2 {
  height: 35px;
}

.button1 {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-color: #FF2D79;
  color: white;
}

.t3 {
  color: #222222;
  font-size: 14px;
  margin-top: 20px;
}

.t4 {
  margin-top: 10px;
  font-size: 10px;
  color: #9B9B9B;
}

.t5 {
  margin-top: 30px;
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 30px;
}

.t6 {
  width: 100%;
  height: 185px;
  display: flex;
}

.left2 {
  width: 33%;
  //background: blue;
}

.right2 {
  width: 67%;
  //background: aqua;
}

.img {
  width: 270px;
  height: 360px;
  position: relative;
  left: 5%;
}

.r1 {
  width: 550px;
  height: 100%;
  //background: yellow;
}

.r2 {
  //background: #2c3e50;
  //height: 100px;
  //display: flex;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 20px;
}

.r3 {
  background: #FF4D8E;
  color: white;
  width: 90px;
  height: 24px;
  font-weight: 300;
  font-size: 14px;
  border-radius: 20px 0px 20px 0px;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.r4 {
  //background: beige;
  font-size: 16px;
  //margin-top: 10px;
  color: gray;
  margin-bottom: 10px;
}
.r5{
  width: 100%;
  height: 100px;
  //background: blue;
}
.r6{

  width: 90%;
  height: 90%;
  margin: auto;
  background: #F6F6F6;
}
.r7{
  width: 60px;
  text-align: center;
  font-size: 14px;
  color:#FF2D79 ;
  background: #FFE7EF;
  //background: black;
  border-radius: 0px 15px 15px 00px;
  margin-bottom: 10px;
}
.r8{
  font-size: 12px;
  color: #181818;
}
.r9{
  font-size: 12px;
  color: gray;
}
.button2{
  margin-top: 20px;
  width: 60px;
  height: 100%;
  border-radius: 20px;
  background-color: #FF2D79;
  color: white;
}
.x1{
  margin-top: 30px;
}
.three-click {
  color: deeppink;
  background-color: white;
  border-bottom: white 1px solid;
  z-index: 10;
  height: 100%;
}

.top-three{
  margin-top: 20px;
  display: flex;
  height: 40px;
  width: 400px;
  flex-direction: row;
  position: relative;
  z-index: 100; /* 确保元素在其他内容之上 */
  //border: gray 1px solid;
 //font-size: 20px;
  .top-three-in {
    //border-right: lightgray 1px solid;
    font-size: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;

    a {
      padding-left: 20px;
      padding-right: 20px;
      font-size: 20px;
    }
  }

}
.d1{
  width: 100%;
  //background: aqua;
}
.p1{
  font-size: 20px;
  width: 100px;
  position: relative;
  left: 20px;
  font-weight: 500;
  margin-top: 30px;
}
.p2{
  color: gray;
  width: 100px;
  position: relative;
  left: 20px;
}
.p3{
  color: black;
  width: 820px;
  position: relative;
  left: 20px;
  margin-bottom: 15px;
}
.img2{
  width: 100%;
}
.top-three.fixed {
  position: sticky;
  top: 0;
  background-color: white; /* 可以添加背景色防止闪烁 */
}
</style>